<template>
  <!--排序-->
  <ul class="order_tab" :class="{'cjy-background-white': true} ">
    <li class="aui-col-xs-4"
        @click=" changeOrder(item.type, item.order)"
        v-for="( item ,index)  in showOrdrList" :key="index"
        style="vertical-align:text-top"
        :class="{'active': item.type == activeType }">
      <span class="cjy-ordr-text">
        <span>{{orderMap.get(item.type)}}</span>
        <span v-if="item.order" style="padding-left:2px;display:inline-block;transform:translatey(-2px);">
        {{ translateOrder(item.order)}}
      </span>
      </span>
    </li>
  </ul>
</template>

<script>
  // import Hello from './components/Hello'

  export default {

    /* orderHeader  用于排序选择的组件*/
    data() {
      return {
        activeType: 'PutTimeSort',
        activeOrder: 'up',
        orderMap: new Map([
          ['isPutTimeSort', '最新'],
          ['isStockSort', '库存'],
          ['isCollectionSort', '收藏'],
          ['ifSaleSort', '销量'],
          ['isNormalprice', '价格']
        ]),
        showOrdrList: [
          {type: "isPutTimeSort", order: 'up'},
//          {type: "isNormalprice", order: 'down'},
          {type: "ifSaleSort", order: 'up'},
          {type: "isCollectionSort", order: 'up'},
        ]
      }
    },
    components: {},
    methods: {
      changeOrder(type, order) {
        var activeType = this.activeType
        if (type == activeType) {
          var acitveIndex = this.showOrdrList.findIndex((item) => {
            return item.type == type
          })
          var activeOrder = this.showOrdrList[acitveIndex].order

          if (activeOrder == 'up') {
            this.showOrdrList[acitveIndex].order = 'down'
            this.activeOrder = 'down'
          }
          else if (activeOrder == 'down') {
            this.showOrdrList[acitveIndex].order = 'up'
            this.activeOrder = 'up'
          } else {
            this.activeOrder = ""
          }
        } else {
          this.activeOrder = order
        }
        this.activeType = type
      },
      translateOrder(data) {
        if (data == 'up') {
          return '↑'
        } else if (data == 'down') {
          return '↓'
        }
        return ''
      }
    },
    watch: {
      config(data) {
        this.$store.commit('cjy/CHANGE_ORDER_CONFIG', data)
      }
    },

    computed: {
      config() {
        var config = {
          type: this.activeType,
          order: this.activeOrder
        }
        return config
      }
    },
    mounted() {
      var config = this.$store.state.cjy.orderConfig
      this.activeOrder = config.order
      this.activeType = config.type

    },

  }
</script>

<style scopend>
  .cjy-oreder-header {

  }

  .order_tab {
    border-bottom: 1px solid rgb(234, 234, 234);;
    width: 100%;
    height: 2.2rem;
    display: flex;
    vertical-align: middle;
    line-height: 2rem;
  }

  .active span {
    color: rgb(234, 57, 57);
  }

  .active .cjy-ordr-text {

    border-bottom: 1px solid rgb(234, 57, 57);
  }

  .cjy-background-white {
    background: rgba(255, 255, 255, 0.8);
  }

</style>
